<template>
  <div class="movies">
    <div class="movies-item" v-for="item in list" @click="gotoDetail(item.id)">
      <div class="left">
        <img :src="item.img" alt="" />
      </div>
      <div class="right">
        <div class="font">
          <h3>{{ item.nm }}</h3>
          <p>{{ item.wish }}人想看</p>
          <p>主演: {{ item.star }}</p>
          <p>{{ item.showInfo }}</p>
        </div>

        <div
          class="button"
          v-if="item.showStateButton"
          :style="{ background: item.showStateButton?.color }"
        >
          {{ item.showStateButton?.content }}
        </div>
      </div>
    </div>
    <div v-if="list.length === total">没有更多了</div>
  </div>
</template>

<script>
import { nextTick } from "vue";

export default {
  props: ["moreList"],
  data() {
    return {
      moviesList: [],
      total: 0,
    };
  },
  computed: {
    list() {
      return [...this.moviesList, ...this.moreList];
    },
  },

  mounted() {
    fetch("http://101.35.148.193:3000/api/movies/list")
      .then((response) => response.json())
      .then(async (res) => {
        // console.log(res);
        if (res.success) {
          this.moviesList = res.data; // 第一次的电影列表
          // res.ids // 所有电影的id
          // res.total // 电影的总条数
          this.total = res.total;

          await nextTick();
          // 在这里去调用父组件的addBs的事件
          this.$emit("addBs", res.ids, res.data.length);
        }
      });
  },
  methods: {
    gotoDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style scoped lang="less">
.movies {
  margin-top: 15px;
  background-color: #fff;

  .movies-item {
    padding-left: 15px;
    height: 114px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 64px;
      height: 90px;
      background-color: lightblue;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      width: 282px;
      height: 100%;
      border-bottom: 1px solid @borderColor;
      padding-right: 15px;
      display: flex;
      align-items: center;

      .font {
        width: 213px;
        height: 87px;

        h3 {
          font-size: @mfont;
        }
        p {
          font-size: @xsfont;
          margin: 10px 0;
          width: 100%;
          .ells();
        }
      }
      .button {
        width: 54px;
        height: 28px;
        background-color: @themeColor;
        border-radius: 19px;
        color: #fff;
        font-size: @xsfont;
        .center();
      }
    }
  }
}
</style>
